<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>html 页面加载优化</title>
		<!-- 1、dns 预链接、预获取 -->
		<link
			rel="preconnect"
			href="https://console-mock.apipost.cn/mock/eae23248-1ebd-436b-b0ce-8314b925c81e"
			crossorigin
		/>
		<link
			rel="dns-prefetch"
			href="https://console-mock.apipost.cn/mock/eae23248-1ebd-436b-b0ce-8314b925c81e"
		/>
		<!-- 2、在 head 标签里通过 link 引用压缩后的 css。慎用 @import 引用 -->
		<link rel="stylesheet" href="./assets/css/1px.css" />
		<!-- 3、通过 CDN 引用css -->
	</head>

	<body>
		<div id="root">
			<p>html 页面加载优化</p>
			<div id="list"></div>
			<!-- 3、慎用 iframe -->
			<!-- 4、复杂计算逻辑可以通过 WebWorker 开启新线程来计算 -->
			<iframe src="./003-webWorker/index.html" frameborder="0"></iframe>
			<!-- 5、图片懒加载 -->
		</div>
		<script>
			const url =
				'https://console-mock.apipost.cn/mock/eae23248-1ebd-436b-b0ce-8314b925c81e'

			const fetchData = () => {
				return new Promise((resolve, reject) => {
					fetch(url + '/api/test')
						.then((res) => {
							return res.json()
						})
						.then((data) => {
							resolve(data.data)
						})
				})
			}

			const renderList = async () => {
				// 6、缓存 dom 查询
				const listRef = document.querySelector('#list')
				const data = await fetchData()
				console.log('data', data)
				// 7、合并 dom 插入
				const fragment = document.createDocumentFragment()
				data.forEach((item) => {
					const p = document.createElement('p')
					p.textContent = item.name
					fragment.appendChild(p)
				})
				listRef.appendChild(fragment)
			}

			renderList()
		</script>

		<!-- 8、通过 CDN 引入js脚本，一般放在 body 的下面 -->
		<!-- 9、特殊场景的 js 可以设置 async defer 来引用 -->
		<script src="/jquery.min.js"></script>
	</body>
</html>
